
<style scoped lang="less">
.item-box{
  display: inline-block;
  position: relative;
  transition: all ease-in-out 100ms;
  transform: translateY(v-bind(-itemSize));
  width: v-bind(itemSize);
  height: v-bind(itemSize);
  padding: v-bind(gap);
  box-sizing: border-box;
  border-radius: 10px;
  &:active{
    opacity: 0.7;
    transform: translate(1px,3px);
  }
  &__icon{
    width: 100%;
    height: 100%;
    &:hover{
      transform: scale(1.1);
    }
  }
  &__dot{
    &::after{
      content:'';
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(0, 0, 70, 0.46);
      bottom: -3px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
<template>
    <div class="item-box" @click="open" :class="{'item-box__dot':isRunning}" v-toolTip="name" toolTip-position="top" toolTip-gap="45">
      <img :src="icon" class="item-box__icon" >
    </div>
</template>

<script lang="ts" setup >
import DockBarStore from './store'
import mainStore from '@/store/main'
import WindowStore from '@/components/window/src/store'
const dockBarStore = DockBarStore()
const windowStore = WindowStore()

import {computed} from "vue";



const props = defineProps({
  id:{type:String,default:''},
  item:{ type:String, default: () => '' }
})

// 元素大小
const itemSize = computed(_ => dockBarStore.$state.itemSize + 'px')
const gap = computed(_=> dockBarStore.$state.gap + 'px')

const icon = computed(_ => mainStore.getApplication(props?.item)?.logo || '/src/assets/images/logo.png')
const name = computed( _ => mainStore.getApplication(props?.item)?.name || '未定义')
const isRunning = computed(_ => Array.from(windowStore.$state.openWindowList).includes(props.item)) // 正在运行
const run = computed( _ => mainStore.getApplication(props?.item)?.run) // 执行方法


/** 左键点击 */
const open = () => {
  const hasOpenWindow = Array.from(windowStore.$state.openWindowList).some( (ele:any) => ele.indexOf(props.item) !== -1)
  if(hasOpenWindow) windowStore.setApplicationZIndex(props.item)
  else run.value()
}
</script>

